<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j">
    <h:head>
        <title>Roster</title>
        <link href="css/global.css" rel="stylesheet" type="text/css" />
        <link href="css/drop.css" rel="stylesheet" type="text/css" />

        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="js/drag-drop-custom.js"></script>
        <script src="js/global.js"></script>

        <script type="text/javascript">
            //<![CDATA[
            $(document).ready(function(){
            });
            
            function getDR()
            {
                var c = document.getElementById('_DR1');
                var arr = new Array();
                
                for(var i=0;i<c.childNodes.length;i++){
                    if( c.childNodes.item(i).nodeName == "DIV")
                           arr.push(c.childNodes.item(i));
                        
                }

                var arr2 = new Array();
                
                for(var i = 0 ; i < arr.length ; i ++)
                {  
                    var ddd = arr[i].childNodes;
                    var eee = ddd.item(1).getElementsByTagName('div')[1].innerText;
                    arr2.push(eee);
                }
                
                return arr2;
            }
            
            //]]> 
        </script>
        <style>
            .name
            {
                font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
                font-size:0.7em;
                margin:0;
                float : left;
            }
            .team
            {
                font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
                font-size:0.7em;
                margin:0;
                float : left;
            }
            .opp
            {
                font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
                font-size:0.5em;
                margin:0;
                float : left;
            }
            .status
            {
                font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
                font-size:0.5em;
                margin:0;
                float : left;
            }
            .fantasyPoints
            {
                font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
                font-size:0.7em;
                margin:0;
                float : left;
            }
        </style>
    </h:head>
    <h:body>
        <div id="background">
            <div hidden="true" id="myDR"></div>
            <div class="navy">
            </div>
            <div id="content">

                <div id="mainContainer">
                    <h:form>
                        <span class="whiteHeader">Roster</span><br/><br/>
                        <div id="capitals">
                            <p><b>Players</b></p>
                            <div id="dropContent">

                                <c:forEach items="#{rosterBean.dropData}" var="r">
                                    <div class="#{r.get(4) == 'BN' ? 'dragableBox' : 'dragableBox'}" id="#{r.get(0)}">
                                        <div class="textContainer" >
                                            <div class="#{r.get(4) == 'NotBN' ? 'hasPosition' : ''}" hidden="true">#{r.get(5)}</div>
                                            <div hidden="true">#{r.get(3)}</div>
                                            <div class="name">#{r.get(1)} #{r.get(2)}</div>
                                            <div class="team">(-)</div>
                                            <div class="opp">OPP : GB - </div>
                                            <div class="status">Win(24-20)</div>
                                            <div class="fantasyPoints">Fantasy Points : 9.84</div>
                                        </div>  
                                        <div hidden="true"></div>
                                    </div>
                                </c:forEach>		
                            </div>
                        </div>

                        <div id="countries">
                            <div id="_DR1" class="dragableBoxRight">Drop Zone</div>
                        </div>
                        <div class="clear"></div>

                        <a4j:commandButton action="#{rosterBean.delete}" value="Submit!">
                            <a4j:param name="arg0" noEscape="true" value="getDR()" assignTo="#{rosterBean.del}" />
                        </a4j:commandButton>

                    </h:form>
                </div>
                <div id="debug"></div>
                <script type="text/javascript" src="js/drop.js"></script>
            </div>
        </div>
    </h:body>
</html>
